<template>
	<div class="boxMain">
        <div class="applationName flex align-center justify-around">蒋家图书管理系统</div>
		<div class="flex align-center marginAuto justify-around">
			<el-button @click="addFn" class="addBtn" type="primary" style="color: #FFFFFF;">增加</el-button>
			<el-button @click="importFn" class="importBtn" type="primary" style="color: #FFFFFF;">导入</el-button>
		</div>
        <div class="contents">
            <div class="conBox">
                <div class="pic">
                    <img src="../../assets/image/backimg.jpg" alt="">
                </div>
                <div class="info">
                    <span class="bookName">
                        西游记
                    </span>
                    <span class="author">
                        孙悟空
                    </span>
                </div>
            </div>
            <div class="conBox">
                <div class="pic">
                    <img src="../../assets/image/backimg.jpg" alt="">
                </div>
                <div class="info">
                    <span class="bookName">
                        西游记
                    </span>
                    <span class="author">
                        孙悟空
                    </span>
                </div>
            </div>
        </div>
	</div>
</template>

<script>
	export default{
		name: 'login',
		data(){
			return{
				bookList: {}
			}
		},
		methods: {
			addFn(){
                console.log('add');
            },
            importFn(){
                console.log('export');
            }
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.boxMain{
		overflow: hidden;
		.applationName{
			margin-top: 120px;
			color: #333;
			font-size: 39px;
		}
		.addBtn,
        .importBtn{
			width: 300px;
			color: gray;
			font-size: 22px;
			margin-top: 100px;
		}
        
        .contents{
            border: 1px solid gray;
            width: 90%;
            margin: 0 auto;
            height: 600px;
            margin-top: 120px;
            .conBox{
                height: 300px;
                width: 300px;
                border: 1px solid blue;
                margin: 10px;
                float: left;
                .pic{
                    margin: 0 auto;
                    margin-top: 10px;
                    height: 65%;
                    width: 90%;
                    border: 0px solid red;
                    img{
                        height: 100%;
                        width: 100%;
                    }
                }
                .info{
                    height: 50px;
                    width: 90%;
                    margin: 0 auto;
                    border: 0px solid red;
                    margin-top: 30px;
                    span{
                        display: inline-block;
                    }
                    .bookName{
                        font-size: 30px;
                        float: left;
                    }
                    .author{
                        margin-top: 20px;
                        fong-size: 15px;
                        float: right;
                    }
                }
            }
        }
	}
</style>
